<template>
	<view>
		<!-- 顶部前一天 后一天 -->
		<view class="car-top">
			<text class="color">前一天</text>
			<text>{{date}}</text>
			<text>后一天</text>
		</view>
		<!-- 车次信息组件 -->
		<!-- 北京到上海的车次组件 -->
		<view v-for="(item,index) in list" :key="index" class="carInfo" @click="toTrainDetail(item)">
			<!-- 结束开始时间 -->
			<view class="StartEndTime carItem">
				<text class="bigText">{{item.startTime}}</text>
				<text class="littleText">{{item.endTime}}</text>
			</view>
			<view class="StartEndcity carItem">
				<text class="bigText">{{startCity}}</text>
				<text class="littleText">{{endCity}}</text>
			</view>
			<view class="trainNumber carItem">
				<text class="bigText">{{item.trainNumber}}</text>
				<text class="littleText">{{item.allTimes}}</text>
			</view>
			<view class="prices carItem">
				<text class="bigText">{{item.price}}</text>
				<text
					:class="{ 'TicketColor': item.Tickets == '可抢票' ,'littleText':item.Tickets == '已停售' }">{{item.Tickets}}</text>
			</view>
		</view>
		<!-- 底部筛选排序 -->
		<view class="car-bottom">
			<p @click="goSort" :class="{ active: activeTab === 'tab1' }"><u-icon name="clock" color="#1BA9BA"
					size="28"></u-icon>出发 早-晚</p>
			<p @click="train" :class="{ active: activeTab === 'tab2' }"><u-icon name="car-fill" color="#1BA9BA"
					size="28"></u-icon>只看高铁动车</p>
			<p @click="tickets" :class="{ active: activeTab === 'tab3' }"><u-icon name="coupon" color="#1BA9BA"
					size="28"></u-icon>只看有票</p>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				date: '',
				startCity: '',
				endCity: "",
				temp: [],
				activeTab: 'tab2',
				list: [{
						username: '',
						Idcard: '',
						date: '',
						startTime: "06:20",
						endTime: "11:58",
						startCity: "北京南",
						endCity: "上海虹桥",
						trainNumber: "G103",
						allTimes: "5时46分",
						price: "￥449.5",
						Tickets: "已停售"
					},
					{
						username: '',
						Idcard: '',
						date: '',
						startTime: "09:17",
						endTime: "11:58",
						startCity: "北京南",
						endCity: "上海虹桥",
						trainNumber: "G103",
						allTimes: "5时46分",
						price: "￥449.5",
						Tickets: "可抢票"
					},
					{
						username: '',
						Idcard: '',
						date: '',
						startTime: "07:25",
						endTime: "11:58",
						startCity: "北京南",
						endCity: "上海虹桥",
						trainNumber: "G103",
						allTimes: "5时46分",
						price: "￥449.5",
						Tickets: "已停售"
					},
					{
						username: '',
						Idcard: '',
						date: '',
						startTime: "08:30",
						endTime: "11:58",
						startCity: "北京南",
						endCity: "上海虹桥",
						trainNumber: "G103",
						allTimes: "5时46分",
						price: "￥449.5",
						Tickets: "可抢票"
					},
				]
			};

		},
		onLoad(options) {
			console.log("首页传递的", options);
			this.startCity = options.city1
			this.endCity = options.city2
			this.date = options.data
		},
		mounted() {
			this.temp = this.list
		},
		methods: {
			// 发车时间早晚排序
			goSort() {
				this.list.sort((a, b) => {
					// console.log(parseInt(a.startTime),parseInt.startTime);
					return parseInt(a.startTime) - parseInt(b.startTime)
				});
				this.activeTab = 'tab1'
			},
			// 点击筛选可选票
			tickets() {
				let lists = this.list.filter((item) => item.Tickets == "可抢票");
				// console.log(lists);
				this.list = lists
				this.activeTab = 'tab3'
			},
			// 点击查看是否有高铁
			train() {
				this.activeTab = 'tab2'
				this.list = this.temp
			},
			// 点击车次  跳转到车次详情页
			toTrainDetail(item) {
				console.log(item);
				if (item.Tickets == '已停售') {
					uni.showToast({
						title: "车票已售完",
						icon: "error"
					})
				} else {
					item.startCity = this.startCity
					item.endCity = this.endCity
					item.date = this.date
					let jsonData = JSON.stringify(item)
					let codeString = encodeURIComponent(jsonData)
					uni.navigateTo({
						// url:"./TrainDetail/TrainDetail?trainDetail="+item
						url: "/pages/index/TrainDetail/TrainDetail?trainDetail=" + codeString
					})
				}

			}
		}
	}
</script>

<style lang="less">
	// 顶部样式
	.car-top {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #F5F5F5;

		text {
			color: orange;

		}
	}

	// 底部样式

	.car-bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;

		p {
			display: flex;
			justify-content: space-around;
			align-items: center;
			flex-direction: column
		}
	}

	.active {
		color: #1BA9BA;
	}

	// 车次信息
	.carInfo {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		border-bottom: solid 1px #ccc;
		padding: 10rpx 0;

		.carItem {
			width: 150rpx;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
		}

		// 放大的文字样式  第一行
		.bigText {
			font-size: 18px;
		}

		.littleText {
			color: #666;
			font-size: 14px;
		}

		.TicketColor {
			color: #1BA9BA;
		}
	}
</style>